<template>
  <div class="p-border">
    <div class="p-title">
      建筑安全远程动态监测
    </div>
    <div class="p-time">
      {{timeText}}<span class="p-time-week">{{weekText}}</span>
    </div>
    <!--<div class="p-horn-lt"></div>-->
    <!--<div class="p-horn-rt"></div>-->
    <!--<div class="p-horn-lb"></div>-->
    <!--<div class="p-horn-rb"></div>-->

    <slot></slot>
  </div>
</template>

<script>

  export default {
    name: "p-border",
    props: {},
    components: {},
    data() {
      return {
        timeText:'',
        weekText:'',
        timer:null,
        weekday:['星期日','星期一','星期二','星期三','星期四','星期五','星期六']

      }
    },
    methods: {
      getNowTime(){
        const date=new Date();
        const y=date.getFullYear();
        const m=date.getMonth()+1;
        const d=date.getDate();
        this.weekText=this.weekday[date.getDay()]
        this.timeText=`${y}年${m}月${d}日`;
      }
    },
    created(){
      this.getNowTime();
      this.timer=setInterval(this.getNowTime(),3600000);
    },
    beforeDestroy(){
      console.log('beforeDestory')
      clearInterval(this.timer);
    }
  }
</script>

<style lang="scss" scoped>

  .p{
    &-border{
      position: relative;
      width: 100%;
      height: 100%;
      background: url("../../assets/p_back.png") fixed left top  no-repeat ;
      background-size: 100% 100%;
      box-sizing: border-box;
    }

    /**
    &-horn-lt{
      position: absolute;
      top:0;
      left:0;
      display: inline-block;
      border-top:20px solid $border-1;
      border-left:20px solid $border-1;
      border-right:20px solid $back-1;
      border-bottom:20px solid $back-1;
    }
     */

    &-title{
      position: absolute;
      top:2%;

      font-size: 2.2rem;
      font-weight: bold;

      width: 100%;
      text-align: center;
    }

    &-time{
      position: absolute;
      top:6%;
      left: 4%;

      color:$text-2;
      font-size: 1rem;
      font-weight: bold;

      &-week{
        margin-left: 20px;
      }
    }



  }
</style>